<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style lang="less" scoped> 
    /*顶部被滚动隐藏后显示的导航栏  */
.nav-scroll {
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: white;
}
.course-list-scroll {
 /* display: none;*/
  z-index: 100;
  width: 150px;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);
  position: absolute;
  left: 400px;
  top: 60px;
  transition: all 0.3s ease-in-out;
}
.course-list-scroll > .course-item:hover {
  background-color: #90dbc3bd;
}
.course-list-scroll > .course-item > a {
  color: rgba(0, 0, 0, 0.65);
  font: 14px "微软雅黑";
  padding-left: 10px;
}
.course-list-scroll > .course-item > a:visited {
  color: rgba(0, 0, 0, 0.65);
}
.nav-container {
  display: flex;
  width: 1160px;
  height: 80px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
.nav-container > .nav-left {
  display: flex;
}
.nav-container > .nav-left > img {
  width: 132px;
  height: 40px;
}
.nav-container > .nav-left > .nav-box {
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.nav-container > .nav-left > .nav-box > a {
  padding: 10px 20px;
  color: black;
  font: bold 16px "微软雅黑";
}
.nav-container > .nav-right {
  display: flex;
  align-items: center;
}
.nav-container > .nav-right .search-box-button {
  background: #00b278;
  border-radius: 0 20px 20px 0;
}
.nav-container > .nav-right > .chart {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);
}
.nav-container > .nav-right > .login-box {
  padding: 5px 10px;
  border-radius: 22px;
  background-color: white;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.23);
  color: #35c7de;
  color: #333333;
  font: 15px Microsoft YaHei;
}
</style>
</head>
<body>
      <!-- 顶部被滚动隐藏后显示的导航栏 -->
        <div class="nav-scroll" :class="{'scroll': isScroll}">
            <div class="nav-container">
                <div class="nav-left">
                    <img src="https://course.myhope365.com/img/logo-text-green.2137bfaa.png" alt="">
                    <div class="nav-box">
                        <a href="./index.html">首页</a>
                        <a href="" id="course-classify-scroll">课程分类</a>
                        <a href=""> 教学管理云平台</a>
                        <div class="course-list-scroll">
                            <div class="course-item">
                                <a href="">宇哥带你学Java</a>
                            </div>
                            <div class="course-item">
                                <a href="">学长面对面</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="nav-right">
                    <div class="search-box">
                        <input type="text" placeholder="搜索课程~">
                        <span class="search-box-button">
                            <img src="" alt="">
                        </span>
                    </div>
                    <div class="chart">
                        <img src="" alt="">
                    </div>
                    <div class="login-box" data-bs-toggle="modal" data-bs-target="#myModal">
                        登录/注册
                    </div>
                </div>
            </div>
        </div>


        <!-- 登录注册弹窗 -->
                                                
        
</html>